//
// Mobile overrides
//

._mobile {
  font-size: 100%;
  background: $contentBackground;

  // Layout

  body { -ms-overflow-style: -ms-autohiding-scrollbar; }

  ._app, ._container, ._content { overflow: visible; }

  ._container {
    margin: 0;
    border: 0;
  }

  ._content {
    position: static;
    height: auto;
    margin: 0;
    padding: .75rem 1rem 2.5rem;
  }

  ._booting:before, ._content-loading:before { font-size: 3rem; }

  // Header

  ._header {
    position: fixed;
    max-width: 100vw;
  }

  ._logo, ._nav { display: none; }
  ._mobile-btn { display: block; }

  ._search {
    float: none;
    width: auto;
    overflow: hidden;
    padding-left: 2px;
    padding-right: 2px;
    border-right: 0;

    &:before { left: .5rem; }
  }

  ._search-tag { left: .5rem; }

  // Sidebar

  ._sidebar {
    position: static;
    min-height: 100%;
    overflow: visible;
  }

  ._list, ._sidebar-footer { width: 100%; }

  ._list-item {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: none;
  }

  ._list-result {
    padding-left: 2.375rem;

    &:before {
      position: absolute;
      top: .25rem;
      left: .75rem;
    }
  }

  ._list-link { display: none; }

  ._sidebar-footer { box-shadow: none; }

  ._sidebar-footer-save {
    margin: 0;
    box-shadow: 0 1px $noteGreenBorder, 0 -1px $noteGreenBorder;
  }

  // Splash

  ._splash-sponsors { margin-top: 1rem; }

  ._splash-sponsor {
    position: static;

    ._logo-info {
      left: 1rem;
      right: 1rem;
      width: auto;
      max-width: none;
      margin: 0;
    }
  }

  // Notice

  ._notice {
    position: fixed;
    left: 0;
    padding: 0 .5rem;

    ~ ._sidebar {
      margin-top: 2.5rem;
      padding-bottom: 4rem;
    }
  }

  ._notice-text { font-size: .75em; }

  // Notification

  ._notif { position: fixed; }

  // Table of contents

  ._toc {
    float: none;
    max-width: none;
    margin-left: 0;
  }
}

//
// Fix viewport on Windows Phone
//

@-ms-viewport { width: device-width; }
@media (orientation: portrait) and (min-device-width: 720px) and (max-device-width: 768px),
       (orientation: landscape) and (device-width: 1280px) and (max-device-height: 768px) {
  @-ms-viewport { width: 50%; }
}

//
// Header buttons
//

._mobile-btn {
  display: none;
  position: relative;
  float: left;
  width: 2.5rem;
  height: 100%;
  @extend %hide-text;

  &[disabled] {
    opacity: .3;
    cursor: not-allowed;
  }

  &:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -.5rem 0 0 -.5rem;
    @extend %icon;
  }
}

._back-btn {
  &:before { @extend %icon-back; }
}

._forward-btn {
  width: 2.25rem;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);

  &:before {
    margin-left: -.375rem;
    @extend %icon-back;
  }
}

._home-btn {
  float: right;
  width: 2rem;

  &:before {
    margin-left: -.375rem;
    @extend %icon-home;
  }
}

._menu-btn {
  float: right;

  &:before { @extend %icon-menu; }
}

//
// Navigation menu
//

._mobile-nav {
  margin: .25rem 0 1.25rem;
  padding: 0;
  line-height: 2.8;
  overflow: hidden;
  @extend %box;
}

._mobile-nav-link {
  float: left;
  width: 25%;
  text-align: center;
  font-weight: bold;
}

//
// Intro
//

._mobile-intro {
  > ._intro-list { padding-left: 1.5rem; }

  > ._intro-hide,
  > ._intro-sponsors {
    position: static;
    float: none;
    display: block;
    margin-top: .75rem;
    text-align: center;
  }

  ._intro-sponsor { margin: .5em .75em; }
}
